import { useState, useEffect } from 'react';

const rechargeOptions = [
  { coins: 10, price: 1 },
  { coins: 60, price: 6 },
  { coins: 300, price: 30 },
  { coins: 980, price: 98 },
  { coins: 2980, price: 298 },
  { coins: 5880, price: 588 },
  { coins: 15980, price: 1598 }
];

const payMethods = [
  { key: 'bank', label: '银行卡快捷支付', icon: '💳' },
  { key: 'alipay', label: '支付宝', icon: '🅰️', color: '#1677ff' },
  { key: 'wechat', label: '微信支付', icon: '🟩', color: '#1aad19' }
];

export default function RechargeModal({ visible, onClose, onRecharge, balance }) {
  const [selected, setSelected] = useState(0);
  const [agree, setAgree] = useState(false);
  const [paying, setPaying] = useState(false);
  const [showPayModal, setShowPayModal] = useState(false);
  const [payMethod, setPayMethod] = useState('alipay');
  const [countdown, setCountdown] = useState(30 * 60); // 30分钟

  useEffect(() => {
    if (!visible) return;
    setCountdown(30 * 60);
    const timer = setInterval(() => {
      setCountdown(c => (c > 0 ? c - 1 : 0));
    }, 1000);
    return () => clearInterval(timer);
  }, [visible]);

  if (!visible) return null;

  // 支付宝二维码图片（可替换为真实二维码）
  const alipayQR = 'https://img.alicdn.com/imgextra/i3/6000000000422/O1CN01Qw1k6B1F1nQ2YSmHB_!!6000000000422-2-tps-200-200.png';
  const wechatQR = 'https://img.alicdn.com/imgextra/i2/6000000000422/O1CN01Qw1k6B1F1nQ2YSmHC_!!6000000000422-2-tps-200-200.png';

  const handlePay = () => {
    setPaying(true);
    setShowPayModal(true);
    setTimeout(() => {
      setPaying(false);
      setShowPayModal(false);
      onRecharge(rechargeOptions[selected].coins);
    }, 2000);
  };

  const min = String(Math.floor(countdown / 60)).padStart(2, '0');
  const sec = String(countdown % 60).padStart(2, '0');

  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, top: 0, background: 'rgba(0,0,0,0.4)', zIndex: 10001,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
    }}>
      <div style={{
        width: '100%', maxWidth: 430, background: '#fff', borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '18px 16px 12px 16px', minHeight: 320, position: 'relative', boxShadow: '0 4px 24px #0002'
      }}>
        <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 18, marginBottom: 8 }}>请选择支付方式</div>
        <button onClick={onClose} style={{
          position: 'absolute', right: 12, top: 10, background: 'none', border: 'none', fontSize: 22, color: '#888', cursor: 'pointer'
        }}>×</button>
        <div style={{ color: '#333', fontSize: 15, marginBottom: 8 }}>请在<span style={{color:'#ff2d55',fontWeight:'bold'}}>{min}:{sec}</span>内完成支付  金额 <span style={{color:'#ff2d55',fontWeight:'bold',fontSize:17}}>￥{rechargeOptions[selected].price}.00</span> 元</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 10 }}>
          {rechargeOptions.map((opt, i) => (
            <div key={i}
              onClick={() => setSelected(i)}
              style={{
                border: selected === i ? '2px solid #ff2d55' : '1px solid #eee',
                borderRadius: 10,
                padding: '10px 18px',
                cursor: 'pointer',
                background: selected === i ? '#fff0f5' : '#fff',
                minWidth: 80,
                textAlign: 'center'
              }}>
              <div style={{ color: '#ff2d55', fontWeight: 'bold', fontSize: 16 }}>{opt.coins}币</div>
              <div style={{ color: '#888', fontSize: 13 }}>{opt.price}.00元</div>
            </div>
          ))}
        </div>
        <div style={{ background: '#f7f7f7', borderRadius: 12, margin: '10px 0 18px 0', overflow: 'hidden' }}>
          {payMethods.map(m => (
            <div key={m.key} onClick={()=>setPayMethod(m.key)} style={{
              display: 'flex', alignItems: 'center', padding: '14px 12px', cursor: 'pointer',
              borderBottom: m.key !== payMethods[payMethods.length-1].key ? '1px solid #eee' : 'none',
              background: payMethod === m.key ? '#f0f6ff' : '#f7f7f7',
              position: 'relative'
            }}>
              <span style={{fontSize:22,marginRight:12}}>{m.icon}</span>
              <span style={{fontWeight:500, color: m.color || '#333'}}>{m.label}</span>
              {payMethod === m.key && <span style={{position:'absolute',right:16,top:'50%',transform:'translateY(-50%)',color:'#ff2d55',fontSize:20}}>✔</span>}
            </div>
          ))}
        </div>
        <button
          disabled={paying}
          onClick={handlePay}
          style={{
            width: '100%', background: '#ff2d55', color: '#fff', border: 'none',
            borderRadius: 0, padding: '14px 0', fontSize: 18, fontWeight: 'bold', cursor: paying ? 'not-allowed' : 'pointer',
            position: 'absolute', left: 0, right: 0, bottom: 0, borderBottomLeftRadius: 18, borderBottomRightRadius: 18
          }}
        >支付订单</button>
      </div>
      {/* 支付二维码弹窗 */}
      {showPayModal && (
        <div style={{
          position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.45)', zIndex: 10002,
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <div style={{ background: '#fff', borderRadius: 18, padding: '32px 28px 24px 28px', minWidth: 260, textAlign: 'center', position: 'relative', boxShadow: '0 4px 24px #0002' }}>
            <button onClick={()=>{setShowPayModal(false);setPaying(false);}} style={{ position: 'absolute', right: 12, top: 10, background: 'none', border: 'none', fontSize: 22, color: '#888', cursor: 'pointer' }}>×</button>
            <div style={{ fontWeight: 'bold', fontSize: 18, marginBottom: 10 }}>{payMethod==='alipay'?'支付宝支付':payMethod==='wechat'?'微信支付':'银行卡快捷支付'}</div>
            {payMethod==='alipay' && <img src={alipayQR} alt="支付宝二维码" style={{ width: 120, height: 120, marginBottom: 12, borderRadius: 12, border: '1px solid #eee' }} />}
            {payMethod==='wechat' && <img src={wechatQR} alt="微信二维码" style={{ width: 120, height: 120, marginBottom: 12, borderRadius: 12, border: '1px solid #eee' }} />}
            {payMethod==='bank' && <div style={{margin:'32px 0',color:'#888'}}>请在银行App中完成支付</div>}
            <div style={{ color: '#333', fontSize: 15, marginBottom: 8 }}>请使用{payMethod==='alipay'?'支付宝':payMethod==='wechat'?'微信':'银行卡'}扫一扫完成支付</div>
            <div style={{ color: '#ff2d55', fontWeight: 'bold', fontSize: 16, marginBottom: 6 }}>￥{rechargeOptions[selected].price}.00</div>
            <div style={{ color: '#888', fontSize: 13, marginBottom: 8 }}>充值{rechargeOptions[selected].coins}钻石</div>
            <div style={{ marginTop: 10 }}>
              {paying && <span style={{ color: '#ff2d55', fontWeight: 'bold', fontSize: 15 }}>
                <span className="alipay-loading" style={{ marginRight: 8 }}>
                  <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: '#ff2d55', animation: 'alipay-dot 1s infinite alternate' }}></span>
                  <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: '#ff2d55', marginLeft: 3, animation: 'alipay-dot 1s 0.3s infinite alternate' }}></span>
                  <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: '#ff2d55', marginLeft: 3, animation: 'alipay-dot 1s 0.6s infinite alternate' }}></span>
                </span>
                支付中...
              </span>}
              {!paying && <span style={{ color: '#4caf50', fontWeight: 'bold', fontSize: 15 }}>支付成功</span>}
            </div>
            <style>{`
              @keyframes alipay-dot {
                0% { opacity: 0.3; transform: scale(1); }
                100% { opacity: 1; transform: scale(1.4); }
              }
            `}</style>
          </div>
        </div>
      )}
    </div>
  );
} 